<template>
  <div class="app-container">
    <div class="content-main">
      <div class="form-table-box">
        <el-form v-loading="loading" ref="infoForm" :rules="infoRules" :model="infoForm" label-width="120px">
          <el-form-item label="学生名称" prop="memberName">
            <el-input v-model="infoForm.memberName" />
          </el-form-item>
          <el-form-item label="学生性别" prop="sex">
            <el-select v-model="infoForm.sex" placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="学生年龄" prop="age">
            <el-input v-model.number="infoForm.age" />
          </el-form-item>
          <el-form-item label="手机号" prop="cellphone">
            <el-input v-model.number="infoForm.cellphone" />
          </el-form-item>
          <el-form-item label="创建门店" prop="storeId">
            <el-select v-model="infoForm.storeId" placeholder="请选择" @change="selectStore">
              <el-option v-for="item in storeOptions" :key="item.storeId" :label="item.storeName" :value="item.storeId" />
            </el-select>
          </el-form-item>
          <el-form-item label="所属班级" prop="classId">
            <el-select v-model="infoForm.classId" :disabled="!infoForm.storeId" placeholder="请选择" @change="selectClass">
              <el-option v-for="item in classOptions" :key="item.classId" :label="item.className" :value="item.classId" />
            </el-select>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input v-model="infoForm.remark" :rows="3" type="textarea" />
          </el-form-item>
          <!-- 学生的内容 -->
          <el-form-item>
            <div class="courseList">
              <div v-for="(item,index) in courseList" :key="index" class="courseItem">
                <span>周几：</span>
                <el-select v-model="item.weekNo" placeholder="请选择">
                  <el-option v-for="item in weekNoList" :key="item.value" :label="item.value" :value="item.value" />
                </el-select>
                <span>时间：</span>
                <!-- <el-time-picker
                  v-model="item.courseTime"
                  is-range
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  placeholder="选择时间范围"
                  format="HH:mm"
                  value-format="HH:mm"
                /> -->
                <el-time-picker v-model="item.courseTime" placeholder="请选择" format="HH:mm" value-format="HH:mm" />
                <span>课程名称:</span>
                <el-input v-model="item.courseName" class="couseInput" />
                <el-button type="text" size="mini" class="delTxtBtn" @click="deleteCourse(index)">删除</el-button>
              </div>
              <div class="addBtn">
                <el-button type="primary" @click="addCourse">增加</el-button>
              </div>
            </div>
          </el-form-item>
          <!--end  -->
          <el-form-item>
            <el-button type="primary" @click="onSubmitInfo">提交</el-button>
            <el-button @click="goBack">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getClassLsit
} from '@/api/class'
import {
  createMember
} from '@/api/user'
import {
  getStoreLsit
} from '@/api/store/store'
import lodash from 'lodash'
export default {
  data() {
    var checkTel = (rule, value, callback) => {
      if (!/^1[3456789]\d{9}$/.test(value)) {
        callback(new Error('请输入正确的手机号'))
      } else {
        callback()
      }
    }
    return {
      loading: false,
      infoForm: {
        id: '',
        memberName: '',
        sex: '1',
        age: '',
        storeId: '',
        classId: '',
        remark: '',
        cellphone: ''
      },
      options: [{
        value: '1',
        label: '男'
      },
      {
        value: '2',
        label: '女'
      }
      ],
      storeOptions: [],
      classOptions: [],
      infoRules: {
        memberName: [{
          required: true,
          message: '请输入学生姓名',
          trigger: 'blur'
        }],
        age: [{
          required: true,
          message: '请输入学生年龄',
          trigger: 'blur'
        }],
        cellphone: [{
          required: true,
          message: '请输入学生手机号',
          trigger: 'blur'
        },
        {
          validator: checkTel,
          trigger: 'blur'
        }
        ],
        storeId: [{
          required: true,
          message: '请选择门店',
          trigger: 'change'
        }],
        classId: [{
          required: true,
          message: '请选择班级',
          trigger: 'change'
        }]
      },
      weekNoList: [{
        value: '周一'
      },
      {
        value: '周二'
      },
      {
        value: '周三'
      },
      {
        value: '周四'
      },
      {
        value: '周五'
      },
      {
        value: '周六'
      },
      {
        value: '周日'
      }
      ],
      courseList: [{
        courseName: '',
        courseTime: '',
        weekNo: ''
      }]
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    getList() {
      getStoreLsit({
        index: 0,
        size: 100
      }).then(response => {
        this.storeOptions = response.data.data.content
      })
    },
    getClassLsit(data) {
      getClassLsit(data).then(response => {
        this.classOptions = response.data.data.content
      })
    },
    onSubmitInfo: lodash.throttle(function() {
      const _this = this
      // const a = _this.throttle(() => {
      _this.$refs['infoForm'].validate(valid => {
        if (valid) {
          _this.loading = true
          const courseList = _this.courseList
          if (courseList[0].courseName && courseList[0].courseTime) {
            Object.assign(_this.infoForm, {
              scheduleList: _this.courseList
            })
          }
          createMember(_this.infoForm)
            .then(response => {
              _this.loading = false
              _this.$message({
                type: 'success',
                message: '保存成功'
              })
              _this.loading = false
              _this.$router.push({
                name: 'user'
              })
            })
            .catch(err => {
              console.log(err)
              _this.loading = false
            })
        } else {
          return false
        }
      })
    }, 3000),
    deleteCourse(index) {
      this.courseList.splice(index, 1)
    },
    addCourse() {
      const temp = {
        courseName: '',
        courseTime: '',
        storeId: '',
        teacherId: '',
        weekNo: ''
      }
      this.courseList.push(temp)
    },
    getInfo() {
      if (this.infoForm.id <= 0) {
        return false
      }

      // 加载品牌详情
      const that = this
      this.axios
        .get('brand/info', {
          params: {
            id: that.infoForm.id
          }
        })
        .then(response => {
          const resInfo = response.data.data
          resInfo.is_new = !!resInfo.is_new
          resInfo.is_show = !!resInfo.is_show
          that.infoForm = resInfo
        })
    },
    selectStore(v) {
      this.infoForm.classOptions = []
      this.infoForm.classId = ''
      this.infoForm.classList = []
      this.getClassLsit({
        storeId: v,
        index: 0,
        size: 100
      })
    },
    selectClass(v) {
      this.infoForm.classList = this.classOptions.filter(item => {
        return v == item.classId
      })
    }
  }
}
</script>

<style>
	.image-uploader {
		height: 105px;
	}

	.image-uploader .el-upload {
		border: 1px solid #d9d9d9;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.image-uploader .el-upload:hover {
		border-color: #20a0ff;
	}

	.image-uploader .image-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 187px;
		height: 105px;
		line-height: 105px;
		text-align: center;
	}

	.image-uploader .image-show {
		width: 187px;
		height: 105px;
		display: block;
	}

	.image-uploader.new-image-uploader {
		font-size: 28px;
		color: #8c939d;
		width: 165px;
		height: 105px;
		line-height: 105px;
		text-align: center;
	}

	.image-uploader.new-image-uploader .image-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 165px;
		height: 105px;
		line-height: 105px;
		text-align: center;
	}

	.image-uploader.new-image-uploader .image-show {
		width: 165px;
		height: 105px;
		display: block;
	}

	.courseList {
		border: 1px solid #dadada;
		padding: 20px;
	}

	.couseInput {
		width: 100px;
	}

	.courseItem {
		display: flex;
		margin-bottom: 20px;
	}

	.courseItem span {
		padding-left: 4px;
	}

	.addBtn {
		display: flex;
		justify-content: center;
	}

	.delTxtBtn,
	.delTxtBtn:hover,
	.delTxtBtn:active {
		color: #f56c6c;
	}
</style>
